import { FormProps, FormSchema } from '/@/components/Table';

import { BasicColumn } from '/@/components/Table/src/types/table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { uploadApi } from '/@/api/sys/upload';
import { getTagClassificationListApi } from '@/api/resource/tagClassificationApi';
import { getJulyDictItemListByTypeApi } from '@/api/sys/julyDictItemApi';
import { getYearsSelect } from '@/utils/dateUtil';

let tagClassificationList: TagClassificationListGetResultModel = [];
const getTagClassificationList = async () => {
  await getTagClassificationListApi({}).then((res) => {
    tagClassificationList = res;
  });
};
getTagClassificationList();
console.log(tagClassificationList);

//表格显示列
export function getBasicColumns(): BasicColumn[] {
  // @ts-ignore
  return [
    {
      title: '课程id',
      dataIndex: 'id',
      width: 150,
      defaultHidden: true,
    },
    {
      title: '课程名称',
      dataIndex: 'title',
      width: 150,
      resizable: true,
    },
    {
      title: '章节数量',
      dataIndex: 'duration',
      width: 150,
    },
    {
      title: '课程类型',
      dataIndex: 'courseType',
      width: 150,
      component: 'Select',
      customRender: ({ record }) => {
        let courseType = record.courseType;
        let color = '';
        switch (courseType) {
          case 'PUBLIC':
            courseType = '公共课';
            color = 'green';
            break;
          case 'PROFESSIONAL':
            courseType = '专业课';
            color = 'purple';
            break;
        }
        return h(Tag, { color: color }, () => courseType);
      },
    },
    {
      title: '授课老师',
      dataIndex: 'teacher',
      width: 150,
    },
    {
      title: '所属分类',
      dataIndex: 'tagclassificationId',
      width: 150,
      customRender: ({ record }) => {
        let tagClassificationName = '未分类';
        if (record.tagclassificationId && tagClassificationList && tagClassificationList.length > 0) {
          const tagClassification = tagClassificationList.filter(
            (item) => item.id == record.tagclassificationId,
          );
          if (tagClassification) {
            tagClassificationName =
              tagClassification.length > 0 ? tagClassification[0].name : '未分类';
          }
        }
        return tagClassificationName;
      },
    },
    {
      title: '课程种类',
      dataIndex: 'courseKind',
      width: 150,
    },
    {
      title: '课程价格(角)',
      dataIndex: 'price',
      width: 150,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 150,
      customRender: ({ record }) => {
        let status = record.status;
        let color = '';
        switch (status) {
          case 'NORMAL':
            status = '正常';
            color = 'green';
            break;
          case 'LOCKED':
            status = '锁定';
            color = 'purple';
            break;
        }
        return h(Tag, { color: color }, () => status);
      },
    },
    {
      title: '作者',
      dataIndex: 'author',
      width: 150,
    },
    {
      title: '排序',
      dataIndex: 'indexOrder',
      width: 150,
    },
    {
      title: '可售卖年度',
      dataIndex: 'salesYear',
      width: 150,
    },
    {
      title: '来源',
      dataIndex: 'source',
      width: 150,
    },
  ];
}

export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 150,
    baseColProps: { lg: 6, md: 24 },
    schemas: formParamSchema,
  };
}

//查询条件表单
export const formParamSchema: FormSchema[] = [
  {
    field: 'title',
    label: '课程名称',
    component: 'Input',
  },
  {
    field: 'courseType',
    label: '课程类型',
    component: 'ApiSelect',
    required: true,
    componentProps: {
      // more details see /src/components/Form/src/components/ApiSelect.vue
      api: getJulyDictItemListByTypeApi,
      params: {
        type: 'CE_COURSE_TYPE',
      },
      // use name as label
      labelField: 'label',
      // use id as value
      valueField: 'value',
      // not request untill to select
      immediate: true,
    },
  },
];

//编辑表单
export const formSchema: FormSchema[] = [
  {
    field: 'title',
    label: '课程名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'courseType',
    label: '课程类型',
    component: 'ApiSelect',
    required: true,
    componentProps: {
      // more details see /src/components/Form/src/components/ApiSelect.vue
      api: getJulyDictItemListByTypeApi,
      params: {
        type: 'CE_COURSE_TYPE',
      },
      // use name as label
      labelField: 'label',
      // use id as value
      valueField: 'value',
      // not request untill to select
      immediate: true,
    },
  },
  {
    field: 'coverPath',
    label: '课程封面图',
    component: 'Upload',
    required: false,
    componentProps: {
      api: uploadApi,
      accept: ['jpg', 'png', 'jpeg'],
      maxNumber: 1,
      maxSize: 1,
      helpText: '请上传png/jpg 等图片文件，文件大小小于1M,宽高比为2:1',
    },
  },
  {
    field: 'teacher',
    label: '授课老师',
    component: 'Input',
    required: false,
  },
  {
    field: 'tagclassificationId',
    label: '所属分类',
    component: 'TreeSelect',
    required: true,
    componentProps: {
      fieldNames: {
        label: 'name',
        key: 'id',
        value: 'id',
      },
      getPopupContainer: () => document.body,
    },
  },
  {
    field: 'courseKind',
    label: '课程种类',
    component: 'Input',
    required: false,
  },
  {
    field: 'price',
    label: '课程价格，单位=角',
    component: 'Input',
    required: true,
  },
  {
    field: 'author',
    label: '作者',
    component: 'Input',
    required: false,
  },
  {
    field: 'salesYear',
    label: '售卖年度',
    component: 'Select',
    required: false,
    componentProps: {
      mode: 'multiple',
      options: getYearsSelect(),
    },
  },

  {
    field: 'content',
    label: '课程内容简介',
    component: 'InputTextArea',
    required: false,
  },
  {
    field: 'indexOrder',
    label: '排序',
    component: 'Input',
    required: true,
  },
];
